<script setup>
import { showToast } from 'vant';
import { ref, nextTick } from 'vue';
import { useRoute } from 'vue-router';
import router from '../router';
import { showConfirmDialog } from 'vant';
const route = useRoute();


//标题导航栏
const onClickLeft = () => history.back();
import { deleteAddress } from '../apis/addressBook.js'
const onClickRight = async () => {
    showConfirmDialog({
        title: '提示',
        message:
            '地址删除后无法恢复,您确定删除地址?',
    })
        .then(async () => {
            // on confirm
            await deleteAddress(parseInt(route.query.id))
            history.back();
        })
        .catch(() => {
            // on cancel
        });
}
//表单
const consignee = ref(null);
const sex = ref(null);
const isDefault = ref(null)
const phone = ref(null);
const building = ref(null);
const doorplate = ref(null);
const pattern = /^1[3-9]\d{9}$/;
const onFailed = (errorInfo) => {
    console.log('failed', errorInfo);
};
import { addAddress, editAddress } from '../apis/addressBook.js'
import { showSuccessToast } from 'vant';
const onSubmit = async (values) => {
    if (route.query.id) {
        //修改地址
        values.id = parseInt(route.query.id)
        await editAddress(values)
        history.back();
    } else {
        //新增地址
        await addAddress(values)
        history.back();
    }
    console.log('submit', values);
};
//选择器
const showPicker = ref(false);
const columns = [
    { text: '西区G1' },
    { text: '西区G2' },
    { text: '西区G3' },
    { text: '西区G4' },
    { text: '西区G5' },
];

const onConfirm = ({ selectedOptions }) => {
    building.value = selectedOptions[0]?.text;
    showPicker.value = false;
};
const rightTex = ref('')
const rightDisabled = ref(true)
const titel = ref('新增地址')
nextTick(() => {
    if (route.query.id) {
        titel.value = '编辑地址'
        consignee.value = route.query.consignee;
        sex.value = parseInt(route.query.sex);
        isDefault.value = parseInt(route.query.isDefault);
        phone.value = route.query.phone;
        building.value = route.query.building;
        doorplate.value = route.query.doorplate;
        rightTex.value = '删除'
        rightDisabled.value = false
    }
})
</script>
<template>
    <van-nav-bar :title="titel" left-text="返回" :right-text="rightTex" :right-disabled="rightDisabled" left-arrow
        @click-left="onClickLeft" @click-right="onClickRight" />
    <van-form @submit="onSubmit" @failed="onFailed">
        <van-cell-group inset>
            <van-field label="联系人" v-model="consignee" name="consignee" maxlength="10" placeholder="请输入收货人姓名,限10字"
                :rules="[{ required: true, message: '请输入联系人姓名' }]" />
            <van-field name="sex" label="称呼" :rules="[{ required: true, message: '请输入选择称呼' }]">
                <template #input>
                    <van-radio-group v-model="sex" direction="horizontal">
                        <van-radio :name="1">先生</van-radio>
                        <van-radio :name="0">女士</van-radio>
                    </van-radio-group>
                </template>
            </van-field>
            <van-field name="isDefault" label="默认地址" :rules="[{ required: true, message: '请输入选择是否设为默认地址' }]">
                <template #input>
                    <van-radio-group v-model="isDefault" direction="horizontal">
                        <van-radio :name="1">是</van-radio>
                        <van-radio :name="0">否</van-radio>
                    </van-radio-group>
                </template>
            </van-field>
            <van-field label="手机号" v-model="phone" name="phone" placeholder="请输入手机号"
                :rules="[{ pattern, message: '请输入正确的手机号' }]" />
            <van-field v-model="building" is-link readonly name="building" label="地址(楼栋)" placeholder="请选择楼栋"
                @click="showPicker = true" :rules="[{ required: true, message: '请选择楼栋' }]" />
            <van-field v-model="doorplate" name="doorplate" label="门牌号" placeholder="请输入门牌号"
                :rules="[{ required: true, message: '请输入门牌号' }]" />
        </van-cell-group>
        <div style="margin: 16px;">
            <van-button round block type="primary" native-type="submit">
                提交
            </van-button>
        </div>
    </van-form>
    <van-action-sheet v-model:show="showPicker" :closeable="false" title="请选择楼栋">
        <van-popup v-model:show="showPicker" position="bottom">
            <van-picker :columns="columns" @confirm="onConfirm" @cancel="showPicker = false" />
        </van-popup>
    </van-action-sheet>

</template>